<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p></p>
    <script>
        // 数据劫持
        // 劫持的是对象数据类型  数组不行 
        // 当我们对对象的属性 进行访问或者修改   
        // 通过一端代码 捕获到 你的访问或者修改的行为  
        // 进行额外的操作 或者 修改返回的结果 
        
        
        // Object.defineProperty(对象,key,{配置项})
        // 原始数据 和劫持目标 不能是一个 
        // 只能把a对象的内容 劫持的b对象上  
        // a 是原始数据 
        // b 是劫持目标  
        // 由b去渲染页面  


        // Object.defineProperties(对象,配置项)
        // 原始数据和劫持目标可以是一个 
        //  将原始数据 进行了一个备份 
        // 劫持自己的数据到自己身上 

        const pele = document.querySelector('p');


        // // 原始数据 
        // const data = {name:'乃强'};

        // Object.defineProperties(data,{
        //     // 把自己的数据备份了一下 
        //     _name:{
        //         value: data.name,
        //         writable:true
        //     },


        //     // 劫持自己 
        //     // 获取内容 从备份数据中取出来 
        //     // 修改数据 对备份数据进行修改 
        //     name: {
        //         get(){
        //             return this._name; // this 劫持目标自己
        //         },
        //         set(val){
        //             this._name = val; //
        //             bindHtml(); //捕获到你想修改数据 重新渲染 
        //         }

        //     }

        // });

      
        // bindHtml();
        // // 把自己的作为劫持目标  自己的数据渲染到页面上  
        // // 实际上 获取的是备份的数据 
        // // 实际上修改的也是 备份的数据 
        // function bindHtml(){
        //     pele.innerHTML = '我是'+data.name;
        // }
       


        // data.name = '东营一哥';


          // 上面只有一个属性的时候


          // 下面 我的原始数据 两个属性  
          const data = {name:'乃强',age:18};


          // 原始数据自己作为劫持目标  
          // 如果我想 对data的属性 进行获取和修改  
          // 捕获到的行为在自己身上  
          // 如何做到 把自己的数据备份一下  每个属性都备份一下   

          // 劫持的是自己  实际上修改和 设置的是自己的备份数据 


          for(let k in data){
                Object.defineProperties(data,{
                    ['_'+k]:{
                        value:data[k],
                        writable:true
                    },



                    [k]:{
                       get(){
                            return this['_'+k]
                       },
                       
                       set(val){
                            this['_'+k] = val;
                            bindHtml();
                       }
                    }
                });
          }

        bindHtml()
        function bindHtml(){
            pele.innerHTML = '我是'+data.name+'今年'+data.age+'岁';
        }

        data.age = 21;
        data.name='东营三哥'
        // 只能 对已有的属性 进行 捕获相应的行为  
        // 后来增加的属性  不监控 
        data.gender = '男'
        data.height='181cm'

        console.log(data);

       
    </script>
</body>
</html>